<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      show-action
      label
      placeholder="请输入搜索关键词"
      autofocus
      @search="onSearch"
      @input="searchInput"
    >
      <template slot="left">
        <van-icon
          @click="back"
          name="arrow-left"
          color="#6D6F79"
          size="25"
          style="margin-right: 10px;"
        />
      </template>

      <template slot="action">
        <div class="search-btn" @click="onSearch(value)">搜索</div>
      </template>

      <template slot="left-icon">
        <span class="iconfont icon-Group-" style="color: #B9B9B9;font-size: 14px;"></span>
      </template>
    </van-search>
    <!-- 推荐热搜词 -->
    <div class="search-history">
      <div class="search-history-title">
        <div class="title-content">热门推荐</div>
      </div>
      <div class="search-history-item">
        <span v-for="(kw,index) in hot" :key="index" @click="clickSearch(kw)">{{kw}}</span>
      </div>
    </div>
    <!-- 搜索记录 -->
    <div class="search-history">
      <div class="search-history-title">
        <div class="title-content">最近搜索</div>
        <van-icon name="delete" size="20" @click="del" />
      </div>
      <div class="search-history-item">
        <span v-for="(kw,index) in history" :key="index" @click="clickSearch(kw)">{{kw}}</span>
      </div>
    </div>

    <!-- 智能提示区域--cell单元格 -->
    <div class="hot-kw" v-show="hotKw">
      <van-cell-group>
        <van-cell
          v-for="(kw,index) in recommand"
          :key="index"
           @click="clickSearch(kw)"
        >
        <!-- 插槽形式展示 -->
          <template #title>
            <p v-html="kw"></p>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      hot: [
        "安徽歙县",
        "柯南",
        "高考加油",
        "仝卓",
        "Kanye West",
        "伊利亚",
        "金鸣",
        "纸人2"
      ],
      hotKw: false
    };
  },
  computed: {
    recommand: function() {
      var temp = [];
      this.$store.state.searchModule.recommand.forEach(element => {
        if (element.includes(this.value)) {
          element = element.replace(
            this.value,
            `<font style="color:red">${this.value}</font>`
          );
          temp.push(element);
        }
      });
      return temp;
    },
    history: function() {
      return this.$store.state.searchModule.history;
    }
  },
  methods: {
    back() {
      //返回上一页面
      window.history.back();
    },
    onSearch(value) {//头部触发搜索
      //存下搜索历史
      this.$store.dispatch("CHANGE_HISTORY", this.value);
      // console.log(this.value);
      //跳转页面
      this.$router.push({
        path: "/goodslist",
        query: {
          value: value
        }
      });
    },
    searchInput() {//搜索框触发提示区
      window.console.log(this.value);
      // 判断输入框内容长度，来决定提示区是否显示
      if (this.value.length === 0) {
        this.hotKw = false;
      } else {
        this.$store.dispatch("FILTER_KEYWORDS", this.value);
        this.hotKw = true;
      }
    },
    del() {//删除历史搜索
      this.$store.dispatch("DEL_RECOMMAND");
      alert("已清空历史记录");
    },
    clickSearch(kw) {//热搜+历史 触发搜索
      //存下搜索历史
      this.$store.dispatch("CHANGE_HISTORY",kw);
      // console.log(this.value);
      //跳转页面
      this.$router.push({
        path: "/goodslist",
        query: {
          value: kw
        }
      });
    }
  }
};
</script>
<style scoped="scoped">
.top-backbtn {
  background-color: #fff;
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-btn {
  background-color: #e93b3d;
  border-radius: 5px;
  padding: 0px 10px;
  color: #fff;
}

.search-history {
  background-color: #fff;
  border-top: 1px solid #efefef;
  box-sizing: border-box;
  padding: 15px;
}

.search-history-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.search-history-item {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.search-history-item span {
  background-color: #f0f2f5;
  font-size: 12px;
  padding: 5px 10px;
  text-decoration: #686868;
  margin: 5px;
  border-radius: 5px;
}

.hot-kw {
  position: absolute;
  width: 100%;
  padding: 10px 0px;
  top: 55px;
  background-color: #fff;
  min-height: 300px;
}
</style>
